<template>
  <div class="app-container">
  <!--基础配置-->
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
      <el-row :gutter="10">
        <el-col v-for="item in baseList">
          <el-col :span="12">
            <el-form-item :label="item.text" >
              <el-input v-model="form[item.keyName]" placeholder="请输入用户密码" type="text">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div>
              <el-button v-if="item.btnList.includes('copy')" type="primary" @click="copy(item)">复制</el-button>
              <el-button v-if="item.btnList.includes('update')" @click="submitForm(item)">修改</el-button>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </el-form>

    <input id="copyNode" type="hidden">
  </div>
</template>

<script>
import ClipboardJS from 'clipboard'
import { baseInfo, baseInfoUpdate } from "@/api/pt/commissionConfig.js";
import { getToken } from "@/utils/auth";
import { areajson } from "@/utils/area.js";

export default {
  name: "User",
  data() {
    return {
      single:false,
      banUpdate: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 查询参数
      queryParams: {
      },
      form:{
        minkm0: 0,
        minmin0: 0,
        fee: 0,     //服务费
        maxmin: 0,    //	起步时间/min
        minfee: 0,    //起步费用
        minkg: 0,     //起步重量/kg
        minkm: 0,     //	起步距离/km
        minmin: 0,    //起步时间/min
        perkg: 0,     //每超出kg数kg
        perkgfee: 0,  //	每超出kg数费用
        perkm: 0,     //每超出km数
        perkmfee: 0,      //每超出km数费用
        perkmmin: 0,      //每超出km数时间
      },
      rules:{
      },
      baseList: [
        {
          text: '小程序客服号码',
          keyName: 'wxAppletCode',
          btnList: ['update']
        },
        {
          text: 'APP客服号码',
          keyName: 'appletCode',
          btnList: ['update']
        },
        {
          text: 'IOS下载地址',
          keyName: 'iosDownUrl',
          btnList: ['copy','update']
        },
        {
          text: '安卓下载地址',
          keyName: 'andrDownUrl',
          btnList: ['copy','update']
        },
        {
          text: 'H5推广地址',
          keyName: 'h5Url',
          btnList: ['copy','update']
        },
      ],
      copyNode:'',
    };
  },
  mounted() {
    const clipboard = new ClipboardJS('#copyNode', {
      text: trigger => {
        const codeStr = this.copyNode
        this.$notify({
          title: '成功',
          message: '代码已复制到剪切板，可粘贴。',
          type: 'success'
        })
        return codeStr
      }
    })
    clipboard.on('error', e => {
      this.$message.error('代码复制失败')
    })
  },
  created() {
    this.getList();
  },
  methods: {
    copy(e){
      this.copyNode = this.form[e.keyName]
      document.getElementById('copyNode').click()
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      baseInfo().then(response => {
        this.form = response.data;
        this.loading = false;
      }).catch(err=>{
        this.msgError(err);
      });
    },
    /** 提交按钮 */
    submitForm(e) {
      baseInfoUpdate(this.form).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.banUpdate = true;
          this.getList();
        } else {
          this.msgError(response.message);
        }
      });
    },
  }
};
</script>

<style type="text/css">
  .dian {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #999;
    margin-right: 6px;
  }
  .billing_input {
    width: 200px;
    margin-bottom: 20px;
  }
</style>
